<template>
  <!-- v-if="show" -->
  <div class="price-box">
    <div class="price-head">
      <div class="price-head-left">
        <img src="../../assets/img/gisPage/echarts-logo.png" alt="" class="echarts-logo" />
        <span class="echarts-name">可售房屋走势</span>
      </div>
    </div>
    <div class="price-list" @click="fullSc('barLinePbulic', priceTrendData)">
      <barLinePbulic v-if="priceTrendData.xAxisData.length > 0" :housingSupplyStatsData="priceTrendData" class="echarts-height h173"></barLinePbulic>
    </div>

    <div class="price-head">
      <div class="price-head-left">
        <img src="../../assets/img/gisPage/echarts-logo.png" alt="" class="echarts-logo" />
        <span class="echarts-name">成交房屋走势</span>
      </div>
    </div>
    <div class="price-list" @click="fullSc('barLinePbulic', priceTrendData1)">
      <barLinePbulic
        v-if="priceTrendData1.xAxisData.length > 0"
        :housingSupplyStatsData="priceTrendData1"
        class="echarts-height h173"
      ></barLinePbulic>
    </div>

    <div class="price-head">
      <div class="price-head-left">
        <img src="../../assets/img/gisPage/echarts-logo.png" alt="" class="echarts-logo" />
        <span class="echarts-name">均价房屋走势</span>
      </div>
    </div>
    <div class="price-list" @click="fullSc('barLinePbulic', priceTrendData2)">
      <barLinePbulic
        v-if="priceTrendData2.xAxisData.length > 0"
        :housingSupplyStatsData="priceTrendData2"
        class="echarts-height h173"
      ></barLinePbulic>
    </div>
    <el-dialog
      custom-class="magnify-dialig"
      v-model="magnifyData.dialogVisible"
      :width="magnifyData.dialogWidth"
      :top="magnifyData.dialogTop"
      :append-to-body="true"
    >
      <component
        v-if="magnifyData.dialogVisible"
        ref="dialogRef"
        :is="magnifyData.componentName"
        :dialogData="{
          fontSizeTimes: 2,
        }"
        v-bind="{ ...magnifyData.props }"
      ></component>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import barLinePbulic from "@/components/gisPage/barLinePbulic.vue";
export default {
  components: { barLinePbulic },
};
</script>
<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from "vue";
import { barLineParamsData } from "@/utils/chartsPbulic";
import busEmitter from "@/utils/bus";

const show = ref(false);
const tabList = reactive(["可售", "成交", "均价"]);
const picMapData = ref({});
const echartsName = ref("可售房屋走势");
const price_tab = ref(0);
const priceTrendData = ref<any>({
  xAxisData: [],
});
const priceTrendData1 = ref<any>({
  xAxisData: [],
});
const priceTrendData2 = ref<any>({
  xAxisData: [],
});

const magnifyData = ref({
  // chart图放大data
  dialogVisible: false,
  componentName: "",
  componentParams: {},
  dialogWidth: "",
  props: {},
  dialogTop: "",
});

// 房屋成交走势
const priceTrend = (list, index) => {
  let legendStyle = {
    show: false,
    icon: "",
    left: 0,
    top: 0,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 18,
  };
  let gridConfig = {
    left: "5%",
    right: "3%",
    bottom: "15%",
    top: "20%",
  };
  let paramsData = barLineParamsData(
    [],
    picMapData.value.yearList,
    [
      {
        name: price_tab.value == 0 || price_tab.value == 1 ? "单位/套" : "单位/元",
        type: "1",
      },
    ],
    [
      {
        name: "line",
        type: "1",
        areaStyleType: "2",
        stack: "1",
      },
    ],
    [list],
    [
      {
        a: "rgba(0, 43, 79, 1)",
        b: "rgba(0, 43, 79, 0)",
      },
    ],
    legendStyle,
    gridConfig
  );
  if (index == 0) {
    priceTrendData.value = paramsData;
  }
  if (index == 1) {
    priceTrendData1.value = paramsData;
  }
  if (index == 2) {
    priceTrendData2.value = paramsData;
  }
};

busEmitter.on("getSwiperEchart", (data) => {
  if (data == 2) {
    show.value = false;
  } else {
    show.value = true;
    picMapData.value = data.picMap;
    priceTrend(picMapData.value.ksList, 0);
    priceTrend(picMapData.value.ysList, 1);
    priceTrend(picMapData.value.jjList, 2);
  }
});

const fullSc = (componentName, componentParams) => {
  // 放大chart图
  magnifyData.value.dialogTop = "25vh";
  magnifyData.value.dialogVisible = true;
  magnifyData.value.componentName = componentName;
  switch (componentName) {
    case "barLinePbulic": // 单折线图
      magnifyData.value.props = {
        housingSupplyStatsData: componentParams,
        class: "h173 dialog-h173",
      };
      magnifyData.value.dialogWidth = "60%";
      magnifyData.value.dialogTop = "20vh";
      break;
  }
};
</script>

<style scoped lang="less">
.echarts-height {
  height: 173px;
}

.price-box {
  position: fixed;
  top: 185px;
  right: 54px;
  width: 376px;
  height: 206px;
  padding: 7px 12px;

  .price-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .price-head-left {
      display: flex;
      align-items: center;

      img {
        width: 23px;
        height: 23px;
      }

      span {
        font-weight: 400;
        font-size: 18px;
        color: #e9d484;
        margin-left: 10px;
      }
    }

    .price-head-right {
      display: flex;
      justify-content: space-between;
      width: 150px;

      div {
        width: 44px;
        height: 19px;
        border-radius: 3px 3px 3px 3px;
        font-weight: 400;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      div:hover {
        cursor: pointer;
      }

      .price-tab {
        background: linear-gradient(180deg, #da9860 0%, #a0897c 100%);
        color: #ffffff;
      }

      .price-tabs {
        background: linear-gradient(180deg, #9fc0f3 0%, #709ee3 100%);
        color: #002b4f;
      }
    }
  }
}

::v-deep .el-carousel__indicators {
  display: none !important;
}

.price-list {
  height: 185px;
}
</style>
<style lang="less">
.el-overlay {
  z-index: 200001 !important;
  .el-dialog {
    background: linear-gradient(180deg, rgba(71, 121, 185, 0.85) 0%, rgba(10, 65, 118, 0.6) 100%);
    .el-dialog__close {
      color: white;
      font-size: 25px;
    }
  }
}
</style>
